<template>
     <div  >
         <el-dialog v-model="dialogIPTestFrm" title="IP池测试" class="iptest dark h-[80%] ">
              <el-form
                  ref="ruleIpsFormRef"
                  :model="ruleIpsForm"
                  :rules="rulesTxt"
                  label-width="70px"
                  class="m-0 p-0"
                  size="small"
                >
                  <el-row  >
                    <el-input  class="m-2" type="textarea" v-model="ruleIpsForm.txtlines" autocomplete="off" placeholder="多个IP换行" :rows="5"  />
                  </el-row>
                  <el-form-item class="mt-2">
                    <el-button  class="bg-blue-500 text-white ml-[60%]"  @click="submitIpsForm()" size="small">提交</el-button>
                    <el-button @click="resetIpsForm()" size="small">重置</el-button>
                  </el-form-item>
              </el-form>

              <div class="ipsList m-2">
                  <el-table  size="small" :data="ipsList"  border  class="h-[18rem] dark:bg-black text-white"    >
                        <el-table-column  prop="sn"  label="序号"  width="60" align="center"></el-table-column>
                        <el-table-column  prop="ip"   label="IP地址"  width="80" align="center"></el-table-column>
                        <el-table-column  prop="status"   label="结果" width="80" align="center"></el-table-column>
                  </el-table>
                  <div class="footer-button ml-[45%]"  >
                      <el-button  size="small"    class="bg-black text-white ml-[75%]  mt-2 "   @click="ipTestBtn"  >
                        <i class="fa fa-spinner fa-spin  fa-fw" v-show="test_loading"></i>测试</el-button>
                  </div>
              </div>

         </el-dialog>
     </div>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
const test_loading = ref(false)
const dialogIPTestFrm  = ref(true)
const ruleFormRef = ref(null)
const ruleIpsFormRef = ref(null)
const ruleIpsForm = ref({
  txtlines:"127.0.0.1 \n127.0.0.2\n"
})
const rulesTxt = ref({
  txtlines: [
    {required: true, message: '不能为空', trigger: 'blur'}
  ]
})

const ipsList = ref([])

const  resetIpsForm = () => {
  ruleIpsForm.value.txtlines = ""
}

const submitIpsForm = () => {
    if (!ruleIpsForm.value) return
    ruleIpsFormRef.value.validate((valid) => {
        if (valid) {
            IpsList()
        } else {
          console.log('error submit!')
          return false
        }
    })
}

const IpsList = () => {

     let ips  = ruleIpsForm.value.txtlines.split('\n')
     let x=1
     for (const ip of ips ) {
        if (ip) {
          ipsList.value.push(
              {'sn': x, 'ip': ip, 'status': ''}
          )
          x += 1
        }
     }

}

const ipTestBtn = () => {
   if (ipsList.value.length==0)  return false
   for (const ipvalue of ipsList.value) {
       ipvalue.status = '...'
   }
   setTimeout(()=> {
         for (const ipvalue of ipsList.value) {
           updateIPValue(ipvalue)
         }
       }
  ,500)
  
}

// 异步函数来更新数组
async function updateIPValue(ipvalue) {
  // 模拟异步操作
  await new Promise((res,rej)=>{
     window.pywebview.api.pyTestPingStatus(ipvalue.ip).then((ret) => {
        ipvalue.status = (ret==false)?'失败':'OK'
     })
  });
}

</script>

<style scoped>
* {
  color:white !important;
}

/deep/ .el-dialog__title {
   color:white !important;
   font-size: 0.8rem;
}

/deep/ textarea {
   background-color: #333333;
   color:white;
  
}
</style>
